<script lang="ts" setup>
import { ref } from 'vue'
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  message: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue', 'update:message'])
const handerUpdate = () => {
  emit('update:modelValue', '修改父组件的数据')
}
const handerUpdateed = () => {
  emit('update:message', '修改父组件的数据')
}


const test = ref('<h1 style="color: red;">测试</h1>')
</script>

<template>
  <!-- <div>{{ modelValue }}</div> -->
  <input type="text" :value="modelValue">
  <el-button type="primary" size="small" style="width: 100px;" @click="handerUpdate">修改</el-button>
  {{ message }}
  <el-button type="primary" size="small" style="width: 100px;" @click="handerUpdateed">修改1</el-button>


  <div v-text="test"></div>
  <div>{{ test }}</div>
  <div v-html="test"></div>


</template>

<style scoped lang="scss"></style>